<?php
require_once(dirname(__FILE__) . '/inc/config.inc.php');
IsModelPriv('goodsorder');
require_once "function.php";
$id = htmlspecialchars($id);
$log_id = isset($log_id) ? intval(htmlspecialchars($log_id)) : 0;
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>根据起终点经纬度查询驾车路线</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="ui/css/bootstrap.min.css">
    <link rel="stylesheet" href="ui/css/bootstrap-theme.min.css">
    <script src="ui/js/bootstrap.min.js"></script>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        .w300 {
            display: inline-block;
            width: 200px !important
        }

        .w100 {
            display: inline-block;
            width: 130px !important
        }

        #container {
            min-width: 800px;
            min-height: 600px;
        }

        #routes {
            width: 220px;
            height: auto;
            position: absolute;
            right: 10px;
            top: 120px;
            background: url(img/ver.png);
            z-index: 9999;
            border-radius: 10px;
            color: #fff;
            overflow: hidden;
        }

        #routes p {
            color: #fff;
        }

        .routes_box {
            margin: 10px;
        }

        .routes_box .title {
            font-size: 16px;
            text-align: center;
            color: red;
        }

        #jindu {
            width: 260px;
            height: auto;
            position: absolute;
            left: 10px;
            top: 280px;
            background: url(img/ver.png);
            z-index: 9999;
            border-radius: 10px;
            color: #fff;
            overflow: hidden;
        }

        #jindu p {
            color: #fff;
        }

        .jindu_box {
            margin: 10px;
        }

        .jindu_box .title {
            font-size: 16px;
            text-align: center;
            color: red;
        }

    </style>

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=DRXBZ-Q3CHG-6KOQN-IJY6G-LDCS5-W4BZZ"></script>
    <script>
        var map,
            directionsService = new qq.maps.DrivingService({
                complete: function (response) {
                    var start = response.detail.start,
                        end = response.detail.end;

                    var anchor = new qq.maps.Point(6, 6),
                        size = new qq.maps.Size(24, 36),
                        start_icon = new qq.maps.MarkerImage(
                            'img/busmarker.png',
                            size,
                            new qq.maps.Point(0, 0),
                            anchor
                        ),
                        end_icon = new qq.maps.MarkerImage(
                            'img/busmarker.png',
                            size,
                            new qq.maps.Point(24, 0),
                            anchor
                        );
                    start_marker && start_marker.setMap(null);
                    end_marker && end_marker.setMap(null);
                    clearOverlay(route_lines);

                    start_marker = new qq.maps.Marker({
                        icon: start_icon,
                        position: start.latLng,
                        map: map,
                        zIndex: 1,

                    });
                    end_marker = new qq.maps.Marker({
                        icon: end_icon,
                        position: end.latLng,
                        map: map,
                        zIndex: 1
                    });
                    console.log(response.detail);
                    directions_routes = response.detail.routes;
                    var routes_desc = [];
                    //所有可选路线方案
                    for (var i = 0; i < directions_routes.length; i++) {
                        var route = directions_routes[i],
                            legs = route;
                        //调整地图窗口显示所有路线
                        map.fitBounds(response.detail.bounds);
                        //所有路程信息
                        //for(var j = 0 ; j < legs.length; j++){
                        var steps = legs.steps;
                        route_steps = steps;
                        polyline = new qq.maps.Polyline(
                            {
                                path: route.path,
                                strokeColor: '#3893F9',
                                strokeWeight: 6,
                                map: map
                            }
                        )
                        route_lines.push(polyline);
                        //所有路段信息
                        for (var k = 0; k < steps.length; k++) {
                            var step = steps[k];
                            //路段途经地标
                            directions_placemarks.push(step.placemarks);
                            //转向
                            var turning = step.turning,
                                img_position;
                            ;
                            switch (turning.text) {
                                case '左转':
                                    img_position = '0px 0px'
                                    break;
                                case '右转':
                                    img_position = '-19px 0px'
                                    break;
                                case '直行':
                                    img_position = '-38px 0px'
                                    break;
                                case '偏左转':
                                case '靠左':
                                    img_position = '-57px 0px'
                                    break;
                                case '偏右转':
                                case '靠右':
                                    img_position = '-76px 0px'
                                    break;
                                case '左转调头':
                                    img_position = '-95px 0px'
                                    break;
                                default:
                                    mg_position = ''
                                    break;
                            }
                            var turning_img = '&nbsp;&nbsp;<span' +
                                ' style="margin-bottom: -4px;' +
                                'display:inline-block;background:' +
                                'url(img/turning.png) no-repeat ' +
                                img_position + ';width:19px;height:' +
                                '19px"></span>&nbsp;';
                            var p_attributes = [
                                'onclick="renderStep(' + k + ')"',
                                'onmouseover=this.style.background="red"',
                                'onmouseout=this.style.background="green"',
                                'style="margin:5px 0px;cursor:pointer"'
                            ].join(' ');
                            routes_desc.push('<p ' + p_attributes + ' ><b>' + (k + 1) +
                                '.</b>' + turning_img + step.instructions);
                        }
                        //}
                    }
                    //方案文本描述
                    var routes = document.getElementById('routes');
                    routes.innerHTML = '<div class="routes_box"><div  class="title">导航距离：' + response.detail.distance / 1000 + '公里</div><div  class="title">预计时间：' + response.detail.duration + '分钟</div>' + routes_desc.join('<br>') + '</div>';
                }
            }),
            directions_routes,
            directions_placemarks = [],
            directions_labels = [],
            start_marker,
            end_marker,
            route_lines = [],
            step_line,
            route_steps = [];

        function init() {
            map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(33.00595, 114.01663)
            });
            calcRoute();
        }

        function calcRoute() {

            //var start_id=document.getElementById("start_txt").dataset.txt;
            var start_id = document.getElementById("start");
            var start_index = start_id.selectedIndex; // 选中索引
            var start_text = start_id.options[start_index].dataset.txt; // 选中文本
            var end_id = document.getElementById("end");
            var end_index = end_id.selectedIndex; // 选中索引
            var end_text = end_id.options[end_index].dataset.txt; // 选中文本
            var start_name = document.getElementById("start").value.split(",");
            var end_name = document.getElementById("end").value.split(",");
            var policy = document.getElementById("policy").value;
            route_steps = [];
            var label = new qq.maps.Label({
                position: new qq.maps.LatLng(start_name[0], start_name[1]),
                map: map,
                content: start_text
            });
            var label2 = new qq.maps.Label({
                position: new qq.maps.LatLng(end_name[0], end_name[1]),
                map: map,
                content: end_text
            });
            directionsService.setLocation("驻马店");
            directionsService.setPolicy(qq.maps.DrivingPolicy[policy]);
            directionsService.search(new qq.maps.LatLng(start_name[0], start_name[1]),
                new qq.maps.LatLng(end_name[0], end_name[1]));
        }

        //清除地图上的marker
        function clearOverlay(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
        }

        function renderStep(index) {
            var step = route_steps[index];
            //clear overlays;
            step_line && step_line.setMap(null);
            //draw setp line
            step_line = new qq.maps.Polyline(
                {
                    path: step.path,
                    strokeColor: '#ff0000',
                    strokeWeight: 6,
                    map: map
                }
            )
        }

        //显示路段路标
        function showP() {
            var showPlacemark = document.getElementById('sp');
            if (showPlacemark.checked) {
                for (var i = 0; i < directions_placemarks.length; i++) {
                    var placemarks = directions_placemarks[i];
                    for (var j = 0; j < placemarks.length; j++) {
                        var placemark = placemarks[j];
                        var label = new qq.maps.Label({
                            map: map,
                            position: placemark.latLng,
                            content: placemark.name
                        });
                        directions_labels.push(label);
                    }
                }
            } else {
                clearOverlay(directions_labels);
            }
        }
    </script>
</head>
<body onload="init();">
<div id="jindu">
    <div class="jindu_box">
        <?php
        $dosql->Execute("SELECT * FROM `#@__order_log` WHERE orderid='$id'  ORDER BY id asc");
        while ($row2 = $dosql->GetArray()) {

            ?>

            <p>
                <i class="glyphicon glyphicon-ok-sign"><?php echo $row2['op'] ?></i> <?php echo date("m-d H:i:s", $row2['op_time']) ?>
                <span class="red">   <?php echo getManage($row2['manageid']) ?></span></p>
            <?php

        }
        ?>
    </div>
</div>

<?php
//获取最后一次签到的 id
$last_qiandao = 0;
if($log_id>0){
    $row_last = $dosql->GetOne("SELECT * FROM `#@__order_log` WHERE orderid='$id' AND qiandao='true'  AND id<='$log_id'   ORDER BY id desc");
}else{
    $row_last = $dosql->GetOne("SELECT * FROM `#@__order_log` WHERE orderid='$id' AND qiandao='true'   ORDER BY id desc");
}


if (is_array($row_last) && isset($row_last['id'])) {
    $last_qiandao = $row_last['id'];
}

//获取最后一次反馈的 id
$last_fankui = 0;
if($log_id>0) {
    $row_last2 = $dosql->GetOne("SELECT * FROM `#@__order_log` WHERE orderid='$id' AND fankui='true'  AND id<='$log_id'  ORDER BY id desc");
}else{
    $row_last2 = $dosql->GetOne("SELECT * FROM `#@__order_log` WHERE orderid='$id' AND fankui='true'  ORDER BY id desc");
}
if (is_array($row_last2) && isset($row_last2['id'])) {
    $last_fankui = $row_last2['id'];
}


?>

<div style='margin:5px 0px;font-size: 14px'>
    <b>起点: </b>
    <select class="form-control w300" id="start" onchange="calcRoute();">

        <?php
        $dosql->Execute("SELECT * FROM `#@__order_log` WHERE orderid='$id'  ORDER BY id asc");
        $n = 1;
        while ($row2 = $dosql->GetArray()) {
            //是否选中
            if ($row2['id'] == $last_fankui) {
                $is_checked = 'selected="selected"';
            } else {
                $is_checked = '';
            }


            if ($row2['latitude'] != "") {
                echo '<option  ' . $is_checked . ' data-txt="' . $row2['address_name'] . "--" . $row2['op'] . '--' . getManage($row2['manageid']) . '" value="' . $row2['latitude'] . ',' . $row2['longitude'] . '">' . $n . '--' . $row2['op'] . '--' . getManage($row2['manageid']) . '</option>';


            }
            $n++;
        }
        ?>
        <option data-txt="   翡翠100(通达路)" value="33.00595,114.01663">中泓高科本部</option>
    </select>
    <b>终点: </b>
    <select class="form-control w300" id="end" onchange="calcRoute();">
        <?php
        $dosql->Execute("SELECT * FROM `#@__order_log` WHERE orderid='$id'    ORDER BY id asc");
        $k = 1;
        while ($row2 = $dosql->GetArray()) {

            //是否选中
            if ($row2['id'] == $last_qiandao) {
                $is_checked = 'selected="selected"';
            } else {
                $is_checked = '';
            }

            if ($row2['latitude'] != "") {
                if ($row2['jiedan'] == "true") {
                } else {
                    echo '<option ' . $is_checked . ' data-txt="' . $row2['address_name'] . "--" . $row2['op'] . '--' . getManage($row2['manageid']) . '" value="' . $row2['latitude'] . ',' . $row2['longitude'] . '">' . $k . "--" . $row2['op'] . '--' . getManage($row2['manageid']) . '</option>';
                }

            }
            $k++;
        }
        ?>
        <option data-txt="   翡翠100(通达路)" value="33.00595,114.01663">中泓高科本部</option>
    </select>
    <b>计算策略：</b>
    <select class="form-control w100" id="policy" onchange="calcRoute();">
        <option value="LEAST_TIME">最少时间</option>
        <option value="LEAST_DISTANCE">最短距离</option>
        <option value="AVOID_HIGHWAYS">避开高速</option>
        <option value="REAL_TRAFFIC">实时路况</option>
        <option value="PREDICT_TRAFFIC">预测路况</option>
    </select>
    <label>
        <input id="sp" type="checkbox" value='1' onclick='showP()'/>
        显示路段地标
    </label>
</div>
<div id="container"></div>
<div id="routes"></div>
</body>
</html>
